<ion-header>
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backToProPage()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>客户筛选</ion-title>
        <!--<ion-buttons end>-->
            <!--<button ion-button icon-only adpmenutoggle>-->
                <!--<i class="toolbar-menu"></i>-->
            <!--</button>-->
        <!--</ion-buttons>-->
    </ion-toolbar>
</ion-header>

<ion-content>
    <div class="notice">请设定客户筛选条件</div>
    <div class="filterItem" [class.addMargin]="focusStatus">
        <!--客户类型-->
        <div class="selfSelect">
            <div class="selectRow top">
                <span (click)="selectType('O',clientType)" [class.active]="testSelectItem('O',clientType)">投保人</span>
                <span (click)="selectType('I',clientType)" [class.active]="testSelectItem('I',clientType)">被保人</span>
            </div>
        </div>
        <!--VIP等级-->
        <div class="selfSelect" *ngIf="isShowVip()">
            <i class="title">尊享会会员等级</i>
            <div class="selectRow">
                <span (click)="selectType(1,levelType)" [class.active]="testSelectItem(1,levelType)">黄金</span>
                <span class="second" (click)="selectType(2,levelType)"
                      [class.active]="testSelectItem(2,levelType)">白金</span>
            </div>
            <div class="selectRow other">
                <span class="other" (click)="selectType(3,levelType)" [class.active]="testSelectItem(3,levelType)">宏运世家钻石</span>
                <span class="other" (click)="selectType(4,levelType)" [class.active]="testSelectItem(4,levelType)">宏运世家至尊</span>
            </div>
        </div>
        <!--主险产品类型-->
        <div class="selfSelect" [class.isClosed]="isClosed" [class.isOpen]="!isClosed">
            <div class="title">
                <span>主险名称</span>
                <i class="collspan" (click)="isClosed =!isClosed"></i>
            </div>
            <div class="selectRow">
                <span (click)="selectType('CCC',productType)"
                      [class.active]="productType.indexOf('CCC') !== -1">长保福星</span>
                <span (click)="selectType('CDC',productType)"
                      [class.active]="productType.indexOf('CDC') !== -1">长保安康重疾</span>
            </div>
            <div class="selectRow other">
                <span class="other" (click)="selectType('CEC',productType)"
                      [class.active]="productType.indexOf('CEC') !== -1">长保福星尊享版</span>
                <span class="other" (click)="selectType('CFC',productType)"
                      [class.active]="productType.indexOf('CFC') !== -1">长保安康尊享版</span>
            </div>
            <div class="selectRow other">
                <span class="other" (click)="selectType('#CCC,CDC,CEC,CFC',productType)"
                      [class.active]="testSelectItem('#CCC,CDC,CEC,CFC',productType)">其他</span>
            </div>
        </div>
        <!--性别-->
        <div class="selfSelect">
            <i class="title">性别</i>
            <div class="selectRow">
                <span (click)="selectType('M',genderType)" [class.active]="testSelectItem('M',genderType)">男</span>
                <span (click)="selectType('F',genderType)" [class.active]="testSelectItem('F',genderType)">女</span>
            </div>
        </div>
        <!--客户年龄-->
        <div class="selfSelect inputNum">
            <i class="title">客户年龄</i>
            <div class="selectRow">
                <span class="word">
                    <!--(blur)="blurTo()"-->
                    <ion-input [class.lost]="inputNum=='age1'" (ionBlur)="validateForm('age',$event)"
                               [class.error_input]="validator.age.hasError"
                               pattern="[0-9]*" [(ngModel)]="age.from"
                               (ionChange)="correct3Integer($event, 'age', 'from')"
                               (click)="scrollTo($event,'age1')" id="age1">
                    </ion-input>
                    <!--<h5 class="selfInput" [class.test]="inputNum=='age1'">{{age.from}}</h5>-->
                    <i>岁</i>
                </span>
                <span class="word">
                    <ion-input pattern="[0-9]*" [(ngModel)]="age.to" (ionBlur)="validateForm('age',$event)"
                               [class.error_input]="validator.age.hasError"
                               (ionChange)="correct3Integer($event, 'age', 'to')"
                               (click)="scrollTo($event,'age2')" id="age2">
                    </ion-input>
                    <i>岁</i>
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col">接力单客户</div>
            <div class="col">
                <ion-toggle [(ngModel)]="isOrphanFlag" (ionChange)="checkFlag()"></ion-toggle>
            </div>
        </div>
        <!--成为接力单的时间-->
        <div class="dateItem" *ngIf="isOrphanFlag">
            <!--<i class="title">成为接力单的时间</i>-->
            <div class="dateItem-title">
                <div>成为接力单的时间</div>
                <button class="clear-btn"
                        *ngIf="orphanDate.from || orphanDate.to"
                        (click)="cleanDateProp('orphanDate', 'orphanDateRange')">清除
                </button>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" displayFormat="YYYY/MM/DD" pickerFormat="YYYYMMDD"
                              yearValues="{{yearList}}"
                              (ionChange)="validateForm('orphanDate', $event)"
                              [class.error_input]="validator.orphanDate.hasError"
                              [pickerOptions]="pickerOptions" [(ngModel)]="orphanDate.from">
                </ion-datetime>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" displayFormat="YYYY/MM/DD" pickerFormat="YYYYMMDD"
                              yearValues="{{yearList}}"
                              (ionChange)="validateForm('orphanDate', $event)"
                              [class.error_input]="validator.orphanDate.hasError"
                              [pickerOptions]="pickerOptions" [(ngModel)]="orphanDate.to">
                </ion-datetime>
            </div>
        </div>
        <!--生日范围-->
        <div class="dateItem">
            <!--<i class="title">生日范围</i>-->
            <div class="dateItem-title">
                <div>生日范围</div>
                <button class="clear-btn"
                        *ngIf="condition.birthdayTo || condition.birthdayFrom"
                        (click)="cleanAge()">清除
                </button>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" min="2010" max="2100" displayFormat="M月"
                              [(ngModel)]="birth.from" [class.datetime_error]="validator.birth.hasError"
                              pickerFormat="M" [pickerOptions]="monthOptions" (ionChange)="monthSelect($event,1)">
                </ion-datetime>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" min="2010" max="2100" displayFormat="M月"
                              [(ngModel)]="birth.to" [class.datetime_error]="validator.birth.hasError"
                              pickerFormat="M" [pickerOptions]="monthOptions" (ionChange)="monthSelect($event,2)">
                </ion-datetime>
            </div>
        </div>
        <!--上次投保时间范围-->
        <div class="dateItem">
            <!--<i class="title">上次投保生效时间</i>-->
            <div class="dateItem-title">
                <div>上次投保生效时间</div>
                <button class="clear-btn"
                        *ngIf="lastSignDate.from || lastSignDate.to"
                        (click)="cleanDateProp('lastSignDate', 'lastSignDateRange')">清除
                </button>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" displayFormat="YYYY/MM/DD" pickerFormat="YYYYMMDD"
                              yearValues="{{yearList}}"
                              (ionChange)="validateForm('lastSignDate', $event)"
                              [class.error_input]="validator.lastSignDate.hasError"
                              [pickerOptions]="pickerOptions" [(ngModel)]="lastSignDate.from">
                </ion-datetime>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" displayFormat="YYYY/MM/DD" pickerFormat="YYYYMMDD"
                              yearValues="{{yearList}}"
                              (ionChange)="validateForm('lastSignDate', $event)"
                              [class.error_input]="validator.lastSignDate.hasError"
                              [pickerOptions]="pickerOptions" [(ngModel)]="lastSignDate.to">
                </ion-datetime>
            </div>
        </div>
        <!--年缴保费范围-->
        <div class="selfSelect inputNum" *ngIf="isShowVip()">
            <i class="title">年缴保费范围</i>
            <div class="selectRow">
                <span class="word">
                     <ion-input pattern="[0-9]*" [(ngModel)]="totlePrem.from"
                                (ionBlur)="validateForm('totlePrem', $event)"
                                [class.error_input]="validator.totlePrem.hasError"
                                (ionChange)="correctInteger($event, 'totlePrem', 'from')"
                                (focus)="scrollTo($event,'ann1')" id="ann1">
                     </ion-input>
                    <i>元</i>
                </span>
                <span class="word">
                    <ion-input pattern="[0-9]*" [(ngModel)]="totlePrem.to"
                               (ionBlur)="validateForm('totlePrem', $event)"
                               [class.error_input]="validator.totlePrem.hasError"
                               (ionChange)="correctInteger($event, 'totlePrem', 'to')"
                               (focus)="scrollTo($event,'ann2')" id="ann2">
                    </ion-input>
                    <i>元</i>
                </span>
            </div>
        </div>
        <!--理赔通过时间-->
        <div class="dateItem">
            <div class="dateItem-title">
                <div>理赔通过时间</div>
                <button class="clear-btn"
                        *ngIf="claimDate.from || claimDate.to"
                        (click)="cleanDateProp('claimDate', 'claimDateRange')">清除
                </button>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" displayFormat="YYYY/MM/DD" pickerFormat="YYYYMMDD"
                              yearValues="{{yearList}}"
                              (ionChange)="validateForm('claimDate', $event)"
                              [class.error_input]="validator.claimDate.hasError"
                              [pickerOptions]="pickerOptions" [(ngModel)]="claimDate.from">
                </ion-datetime>
            </div>
            <div class="item">
                <ion-datetime cancelText="取消" doneText="确定" displayFormat="YYYY/MM/DD" pickerFormat="YYYYMMDD"
                              yearValues="{{yearList}}"
                              (ionChange)="validateForm('claimDate', $event)"
                              [class.error_input]="validator.claimDate.hasError"
                              [pickerOptions]="pickerOptions" [(ngModel)]="claimDate.to">
                </ion-datetime>
            </div>
        </div>
        <!--理赔金额-->
        <div class="selfSelect inputNum">
            <i class="title">理赔金额范围</i>
            <div class="selectRow">
                <span class="word">
                     <ion-input [(ngModel)]="claimAmt.from"
                                (ionBlur)="validateForm('claimAmt', $event)"
                                [class.error_input]="validator.claimAmt.hasError"
                                (ionChange)="correctFloat($event, 'claimAmt', 'from')"
                                (focus)="scrollTo($event,'caim1')" id="caim1">
                     </ion-input>
                    <i>元</i>
                </span>
                <span class="word">
                    <ion-input [(ngModel)]="claimAmt.to"
                               (ionChange)="correctFloat($event, 'claimAmt', 'to')"
                               (ionBlur)="validateForm('claimAmt', $event)"
                               [class.error_input]="validator.claimAmt.hasError"
                               (focus)="scrollTo($event,'caim2')" id="caim2">
                    </ion-input>
                    <i>元</i>
                </span>
            </div>
        </div>
        <!--保单状态-->
        <div class="selfSelect">
            <i class="title">保单状态</i>
            <div class="selectRow">
                <span (click)="selectType('1',policyType)"
                      [class.active]="testSelectItem('1',policyType)">
                    缴费期内</span>
                <span (click)="selectType('2',policyType)"
                      [class.active]="testSelectItem('2',policyType)">
                    豁免保费</span>
            </div>
            <div class="selectRow other">
                 <span class="other" (click)="selectType('3',policyType)"
                       [class.active]="testSelectItem('3',policyType)">
                    保费已缴清</span>
                <span class="other" (click)="selectType('5',policyType)"
                      [class.active]="testSelectItem('5',policyType)">减额缴清</span>
            </div>
            <div class="selectRow other">
                <span class="other" (click)="selectType('F',policyType)"
                      [class.active]="testSelectItem('F',policyType)">合同期满</span>
                <span class="other" (click)="selectType('0,4,6,7,8,A,B,C,D,E,H,J,L,N,R,S,X',policyType)"
                      [class.active]="testSelectItem('0,4,6,7,8,A,B,C,D,E,H,J,L,N,R,S,X',policyType)">其他状态</span>
            </div>
        </div>
    </div>
</ion-content>
<ion-footer>
    <ion-row>
        <ion-col>
            <button ion-button (click)="resetData()" class="foot-btn_reset">重置</button>
        </ion-col>
        <ion-col>
            <button ion-button class="foot-btn_done" (click)="filterHandler()" [disabled]="!canSubmit">查询</button>
        </ion-col>
    </ion-row>
</ion-footer>

